<template>
  <div>
    <oolongPoptip trigger="hover" title="提示标题" content="提示内容">
      <oolongButton>hover 激活</oolongButton>
    </oolongPoptip>
    <oolongPoptip title="提示标题" content="提示内容">
      <oolongButton>click 激活</oolongButton>
    </oolongPoptip>
    <oolongPoptip trigger="focus" title="提示标题" content="提示内容">
      <oolongButton>focus 激活</oolongButton>
    </oolongPoptip>
    <oolongPoptip trigger="focus" title="提示标题" content="提示内容">
      <oolongInput placeholder="输入框的 focus"></oolongInput>
    </oolongPoptip>
    <br><br>
    <oolongPoptip :visible="visible">
      <a>click 激活</a>
      <div slot="title"><i>自定义标题</i></div>
      <div slot="content">
        <a @click="close">关闭提示框</a>
      </div>
    </oolongPoptip>
    <br><br>
    <div class="top">
      <oolongPoptip title="提示标题" content="提示内容" placement="top-end">
        <oolongButton>上左</oolongButton>
      </oolongPoptip>
      <oolongPoptip title="提示标题" content="提示内容" placement="top">
        <oolongButton>上边</oolongButton>
      </oolongPoptip>
      <oolongPoptip title="提示标题" content="提示内容" placement="top-start">
        <oolongButton>上右</oolongButton>
      </oolongPoptip>
    </div>
    <div class="center">
      <div class="center-left">
        <oolongPoptip title="提示标题" content="提示内容" placement="left-end">
          <oolongButton>左上</oolongButton>
        </oolongPoptip>
        <br><br>
        <oolongPoptip title="提示标题" content="提示内容" placement="left">
          <oolongButton>左边</oolongButton>
        </oolongPoptip>
        <br><br>
        <oolongPoptip title="提示标题" content="提示内容" placement="left-start">
          <oolongButton>左下</oolongButton>
        </oolongPoptip>
      </div>
      <div class="center-right">
        <oolongPoptip title="提示标题" content="提示内容" placement="right-end">
          <oolongButton>右上</oolongButton>
        </oolongPoptip>
        <br><br>
        <oolongPoptip title="提示标题" content="提示内容" placement="right">
          <oolongButton>右边</oolongButton>
        </oolongPoptip>
        <br><br>
        <oolongPoptip title="提示标题" content="提示内容" placement="right-start">
          <oolongButton>右下</oolongButton>
        </oolongPoptip>
      </div>
    </div>
    <div class="bottom">
      <oolongPoptip title="提示标题" content="提示内容" placement="bottom-end">
        <oolongButton>下左</oolongButton>
      </oolongPoptip>
      <oolongPoptip title="提示标题" content="提示内容" placement="bottom">
        <oolongButton>下边</oolongButton>
      </oolongPoptip>
      <oolongPoptip title="提示标题" content="提示内容" placement="bottom-start">
        <oolongButton>下右</oolongButton>
      </oolongPoptip>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible: true
    }
  },
  methods: {
    close() {
      this.visible = false;
    }
  }
}
</script>
<style lang="scss" scoped>
.top, .bottom {
  text-align: center;
}

.center {
  width: 300px;
  margin: 10px auto;
  overflow: hidden;
}

.center-left {
  float: left;
}

.center-right {
  float: right;
}
</style>
